<template>
	<view class="page">
		<!-- 		<view class="img">
			<uv-swiper :list="list" previousMargin="30" nextMargin="30" circular :autoplay="true" radius="25"
				bgColor="#ffffff" height="200"   ></uv-swiper>
		</view> -->
		<view class="bg">
			<image style="width: 100%;height: 350px;" src="/static/index_1.jpg"></image>
		</view>
		<view class="apps">
			<view class="items">
				<view class="item" @click="baoming">
					<image src="/static/baoming.png" style="width: 75px;height: 75px;"></image>
					<view class="text">活动预约</view>
				</view>
				<view class="item" @click="log">
					<image src="/static/baomingjilu.png" style="width: 75px;height: 75px;"></image>
					<view class="text">预约记录</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	const db = uniCloud.database();
	const banner_db = db.collection("opendb-banner")

	export default {
		data() {
			return {
				list: []
			}
		},
		onShow() {
			this.load_data();
		},
		methods: {
			baoming() {
				uni.navigateTo({
					url: '/pages/abu_activity_yuyue/add'
				});
			},
			log() {
				uni.navigateTo({
					url: './hd_yuyue_log'
				});
			},
			async load_data() {
				try {
					const res = await banner_db.get();
					const res_data = res.result.data;
					this.list = res_data.map(item => item.bannerfile.url);
				} catch (error) {
					console.error('数据加载失败：', error);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		// background: linear-gradient(to bottom, #93c385 0%, #ffffff 100%);
		background-color: #f4f4f4;
		display: flex;
		flex-direction: column;

		.apps {
			z-index: 999;
			background-color: #fff;
			margin: 50px;
			padding: 20px;
			margin-top: -100px;
			border-radius: 25px;

			.items {
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.item {
					padding: 20px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.text {
						padding: 10px;
						font-size: 20px;
					}
				}
			}
		}
	}
</style>